<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>cropper 图片截取（剪裁）上传 croppers - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="基于layui，根据cropper修改的图片截取（剪裁）上传插件，适用于头像等图片上传。"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="/"> <img src="/static/images/layui/logo.png" alt="layui"> </a>
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="/">框架</a> </li>
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="/alone.html" target="_blank">独立组件</a>
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>cropper 图片截取（剪裁）上传</a> <span class="layui-badge layui-bg-green layui-hide-xs">croppers</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/16087680/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">ad**f</cite> <img src="/images/fly/avatar/3.jpg" alt="ad**f"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>基于layui，根据cropper修改的图片截取（剪裁）上传插件，适用于头像等图片上传。</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">创建：2018-9-12 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text">
        示例：
       <br>html
       <br>
       <pre>&lt;div class="layui-form-item"&gt;<br>                                    &lt;label class="layui-form-label"&gt;头像&lt;/label&gt;<br>                                    &lt;div class="layui-input-inline"&gt;<br>                                        &lt;input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input"&gt;<br>                                    &lt;/div&gt;<br>                                    &lt;div class="layui-input-inline"&gt;<br>                                        &lt;div class="layui-upload-list" style="margin:0"&gt;<br>                                            &lt;img src="123.jpg" id="srcimgurl" class="layui-upload-img"&gt;<br>                                        &lt;/div&gt;<br>                                    &lt;/div&gt;<br>                                    &lt;div class="layui-input-inline layui-btn-container" style="width: auto;"&gt;<br>                                        &lt;button class="layui-btn layui-btn-primary" id="editimg"&gt;修改图片&lt;/button &gt;<br>                                    &lt;/div&gt;<br>                                    &lt;div class="layui-form-mid layui-word-aux"&gt;头像的尺寸限定150x150px,大小在50kb以内&lt;/div&gt;<br>                                &lt;/div&gt;</pre>js
       <br>
       <pre>layui.config({<br>        base: '/static/cropper/' //layui自定义layui组件目录<br>    }).use(['form','croppers'], function () {<br>        var $ = layui.jquery<br>            ,form = layui.form<br>            ,croppers = layui.croppers<br>            ,layer= layui.layer;<br><br>        //创建一个头像上传组件<br>        croppers.render({<br>            elem: '#editimg'<br>            ,saveW:150     //保存宽度<br>            ,saveH:150<br>            ,mark:1/1    //选取比例<br>            ,area:'900px'  //弹窗宽度<br>            ,url: "upload/uploadImg"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样<br>            ,done: function(url){ //上传完毕回调<br>                $("#inputimgurl").val(url);<br>                $("#srcimgurl").attr('src',url);<br>            }<br>        });<br><br>    });</pre>后台上传
       <br>
       <pre>//用的thinkphp5.x<br><br>public function uploadImg()<br>    {<br>        //获取文件对象<br>        $file = $this-&gt;request-&gt;file('file');<br>        //验证并上传<br>        $info = $file-&gt;validate(['size'=&gt;'5242880','ext'=&gt;'jpg,gif,png'])<br>            -&gt;move('static/upload/admin');<br>        //判断是否成功<br>        if($info){<br>            $data['src'] = '/static/upload/admin/'.$info-&gt;getSaveName();<br>            $this-&gt;result($data,0,'上传成功');<br>        }else{<br>            $this-&gt;result('',200,$file-&gt;getError());<br>        }<br>    }</pre>
       <img src="/upload/2018_9/16087680_1536740198693_298.png"> 
       <br>
       <img src="/upload/2018_9/16087680_1536740584404_21642.jpg"> 
       <br>
       <img src="/upload/2018_9/16087680_1536740597820_71165.jpg"> 
       <br>
       <img src="/upload/2018_9/16087680_1536740609455_85786.png"> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/16087680_1536739899662_77151.rar" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>